<script lang="ts" setup>
import { ref, computed, watch, onMounted, reactive,PropType } from 'vue';
const props = defineProps({
    formList: {
        type: Object as PropType<any[]>
    },
    editable: {
        type: Boolean
    },
    isHasExtra: {
        type: Boolean
    },
})
const cardGutterKey:any=ref()
const tabsCardList = ref<any>()
const emit = defineEmits(['handleAdd', 'handleDelete'])
const handleAdd = async () => {
    emit('handleAdd')
}
const handleDelete = (key:any) => {
    if (cardGutterKey.value === key) {
        cardGutterKey.value = 0
    }
    emit('handleDelete', key)
}
watch(
    () => props.formList,
    (val)=>{
        tabsCardList.value = val
    },
    {
        immediate: true
    }
)
watch(
    ()=>props.formList?.length,
    (val) => {
        cardGutterKey.value = val && (val - 1)
    }
)
</script>

<template>
    <a-tabs 
        class="tabs-card-style"
        v-model:active-key="cardGutterKey"
        type="card-gutter" 
        :editable="props.editable" 
        @delete="handleDelete" 
        :show-add-button="false" 
        auto-switch
    >
        <a-tab-pane 
            v-for="(item, index) of tabsCardList" 
            :key="index" 
            :title="`指标${index + 1}`"
            :name="`${index+1}`"
        >
            <slot name="content" :item="item" :index="index"></slot>
        </a-tab-pane>
        <template #extra v-if="props.isHasExtra">
            <span class="add-metrics" @click="() => {
                handleAdd()
            }">+添加指标</span>
        </template>
    </a-tabs>
</template>

<style lang="scss" scoped>
@import './index.scss';
.add-metrics {
  color: #3C6EFF;
  cursor: pointer;
}
.tabs-card-style {
    margin-top: 17px;
}
</style>